<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM对话系统</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            min-height: 100vh; 
            overflow-x: hidden; /* 防止横向滚动 */
        }
        
        /* 侧边栏样式 - 右侧 */
        #sidebar {
            width: 350px; 
            background-color: #f5f5f5; 
            border-left: 1px solid #ccc; 
            display: flex; 
            flex-direction: column; 
            height: 100vh; 
            position: fixed; 
            right: 0; 
            top: 0; 
            transform: translateX(0); /* 默认打开 */
            transition: transform 0.3s ease; 
            z-index: 100; 
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        }
        
        /* 侧边栏关闭状态 */
        #sidebar.closed {
            transform: translateX(100%); 
        }
        
        /* 侧边栏头部 */
        #sidebar-header {
            padding: 15px; 
            background-color: #1890ff; 
            color: white; 
            text-align: center; 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
        }
        
        /* 侧边栏头部按钮 */
        #sidebar-header button {
            background: transparent; 
            border: none; 
            color: white; 
            cursor: pointer; 
            padding: 5px 10px; 
            margin: 0; 
            font-size: 16px; 
            font-weight: bold;
        }
        
        /* 聊天容器 */
        #chat-container {
            flex: 1; 
            padding: 10px; 
            overflow-y: auto; 
        }
        
        /* 消息样式 */
        .message {
            margin: 10px 0; 
            padding: 10px; 
            border-radius: 5px; 
            max-width: 85%; 
            word-wrap: break-word; 
        }
        
        .user-message {
            background-color: #e6f7ff; 
            margin-left: auto; 
        }
        
        .bot-message {
            background-color: #ffffff; 
            border: 1px solid #eee; 
        }
        
        /* 输入容器 */
        #input-container {
            padding: 10px; 
            border-top: 1px solid #ccc; 
            display: flex; 
        }
        
        #message-input {
            flex: 1; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
        }
        
        button {
            padding: 10px 20px; 
            background-color: #1890ff; 
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            margin-left: 10px; 
        }
        
        /* 主内容区域 */
        #main-content {
            padding: 20px; 
            margin-right: 350px; 
            transition: margin-right 0.3s ease; 
            min-height: 100vh; 
            box-sizing: border-box;
        }
        
        /* 当侧边栏关闭时，主内容区域填满宽度 */
        #sidebar.closed ~ #main-content {
            margin-right: 0; 
        }
        
        /* 全局开关按钮 */
        #global-toggle {
            position: fixed; 
            right: 20px; 
            top: 20px; 
            padding: 10px 15px; 
            background-color: #1890ff; 
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            z-index: 102; 
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 
            transition: all 0.3s ease; 
            font-size: 14px; 
            font-weight: bold;
        }
        
        /* 侧边栏手柄 - 关闭时显示 */
        #sidebar-handle {
            position: fixed; 
            right: 0; 
            top: 50%; 
            transform: translateY(-50%); 
            width: 30px; 
            height: 100px; 
            background-color: #1890ff; 
            border-radius: 10px 0 0 10px; 
            cursor: pointer; 
            z-index: 99; 
            display: none; 
            align-items: center; 
            justify-content: center; 
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); 
            color: white; 
            font-weight: bold; 
            font-size: 16px;
        }
        
        /* 当侧边栏关闭时显示手柄 */
        #sidebar.closed + #sidebar-handle {
            display: flex; 
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            #sidebar {
                width: 100%; 
                transform: translateX(100%); /* 移动设备上默认关闭 */
            }
            
            #sidebar.active {
                transform: translateX(0); 
            }
            
            #main-content {
                margin-right: 0; 
            }
            
            #global-toggle {
                display: block; 
            }
        }
    </style>
</head>
<body>
    <!-- 全局开关按钮 -->
    <button id="global-toggle" aria-label="打开/关闭聊天">
        聊天
    </button>
    
    <!-- 侧边栏 -->
    <div id="sidebar">
        <div id="sidebar-header">
            <h2>大语言模型对话系统</h2>
            <button id="sidebar-close" aria-label="关闭">
                关闭
            </button>
        </div>
        <div id="chat-container"></div>
        <div id="input-container">
            <input type="text" id="message-input" placeholder="请输入消息...">
            <button id="send-button">发送</button>
        </div>
    </div>
    
    <!-- 侧边栏手柄 -->
    <div id="sidebar-handle" aria-label="打开聊天">
        <span>聊天</span>
    </div>
    
    <!-- 主内容区域 -->
    <div id="main-content">
        <h1>欢迎使用大语言模型对话系统</h1>
        <p>这是主内容区域。您可以使用右侧的聊天按钮或侧边栏手柄打开/关闭AI助手。</p>
        <p>功能特点：</p>
        <ul>
            <li>右上角固定的聊天开关按钮，随时可访问</li>
            <li>侧边栏可完全打开或关闭，不占用屏幕空间</li>
            <li>关闭时显示侧边栏手柄，方便快速打开</li>
            <li>响应式设计，适配各种屏幕尺寸</li>
        </ul>
    </div>

    <script>
        const sidebar = document.getElementById('sidebar');
        const sidebarClose = document.getElementById('sidebar-close');
        const globalToggle = document.getElementById('global-toggle');
        const sidebarHandle = document.getElementById('sidebar-handle');
        const chatContainer = document.getElementById('chat-container');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');

        // 切换侧边栏状态
        function toggleSidebar() {
            sidebar.classList.toggle('closed');
            sidebar.classList.toggle('active');
        }

        // 绑定事件
        sidebarClose.addEventListener('click', toggleSidebar);
        globalToggle.addEventListener('click', toggleSidebar);
        sidebarHandle.addEventListener('click', toggleSidebar);

        // 添加消息到聊天容器
        function addMessage(text, isUser) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
            messageDiv.textContent = text;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 发送消息
        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message) return;

            addMessage(message, true);
            messageInput.value = '';

            fetch('/chat', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({message: message})
            })
            .then(response => response.json())
            .then(data => {
                addMessage(data.message, false);
            })
            .catch(error => {
                console.error('Error:', error);
                addMessage('抱歉，发生了错误。', false);
            });
        }

        // 绑定发送事件
        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html>